<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>

<body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 DELETE 请求</button>
    <script>
        /* 
        常用静态方法(请求):
            axios.get(url,config);
            axios.delete(url,config);
            axios.post(url,data,config);
            axios.push(url,data,config);
        */
        const buttons = document.querySelectorAll('button')

        //get请求
        buttons[0].onclick = async () => {
            try {
                const response = await axios.get(`http://localhost:3000/movie`, {
                    params: {
                        id: 1,
                        name: 'aa'
                    }
                })
                console.log(response.data)
            } catch (error) {
                console.log(error);
                alert(error.message);
            }

        }

        //添加
        buttons[1].onclick = async () => {
            const response = await axios.post('http://localhost:3000/movie', 'name=野外求生&director=贝爷')
            console.log(response.data);
        }

        //更新
        buttons[2].onclick=async()=>{
            // 内部会自动转换为Json, 并指定相应Content-Type请求头
            const response = await axios.put('http://localhost:3000/movie/13',{
                name:'野外生存记15',
                director:'贝爷15'
            })
            console.log(response.data)
        }

        //删除
        buttons[3].onclick=async ()=>{
            const response=await axios.delete('http://localhost:3030/movie/13')
            console.log(response.data)
        }
    </script>
</body>

</html>